<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/6/23
  Time: 9:55 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的购物车</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">

    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">

    <style>
        .cart_img img {
            width: 65px;
            height: 65px;
        }

        .text_slice {
            width: 200px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>

</head>
<body>
    <%@ include file="../common/nav.jsp"%>


    <div class="container-fluid" style="margin-top: 40px">
        <div class="row">
            <div class="table-responsive">
                <table class="table">
                    <caption>我的购物车列表</caption>
                    <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>序号</th>
                        <th>产品图</th>
                        <th>名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${cartList}" var="c" varStatus="vs">
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>${vs.count}</td>
                                <td class="cart_img"><img src="/imgs/${c.shangpinImg}"></td>
                                <td>${c.shangpinName}</td>
                                <td>${c.shangpinPrice}</td>
                                <td><input onblur="change_num(this,${c.id})" type="number" style="width: 50%" value="${c.counts}" class="form-control"></td>
                                <td>${c.price}</td>
                                <td class="text_slice">${c.shangpinRemark}</td>
<%--                                a超链接触发一个单击事件--%>
                                <td><button class="btn btn-link" onclick="del_cart2(this,${c.id})"><a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a></button></td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>

        </div>
    </div>

    <%--    引入layui - js--%>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>

    <%--    2. 先引入jquery.min.js--%>
    <script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
    <%--    3. 引入bootstrap.js文件--%>
    <script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script>
        //删除购物车 - 同步
        function del_cart(id){
            layer.confirm('确认删除吗?', function(index){
                //确定按钮
                window.location="/cart/del?id="+id;
                //关闭这个询问框
                layer.close(index);
            })
        }

        //异步删除 - 对js要求高
        function del_cart2(obj,cid){

            layer.confirm('确认删除吗?', function(index){

                $.get('/cart/ajaxDel',{id:cid},function(data){
                   if(data.code=="200"){
                       //直接使用js操作dom
                       //js删除所在的删除行
                       //obj是一个js对象
                       //js对象要转换成jquery对象 - $(js对象)

                       $(obj).parent().parent().remove();

                       layer.msg('删除成功')

                   }

                    //关闭这个询问框
                    layer.close(index);
                });

            })
        }

        // 更新数量的函数
        function change_num(obj,id){//obj - this当前对象 - input对象,js对象.属性
            $.get('/cart/update',{id:id,counts:obj.value},function(data){//ajax操作
                if(data.code=="200"){
                    //js操作dom
                    //1. 获取页面的单价
                    let p_price = parseFloat($(obj).parent().prev().html());
                    //2. 计算最新的总价
                    let total = parseFloat(obj.value)*p_price;
                    //3. 将总价重新填充到页面中
                    let next_td = $(obj).parent().next();
                    //html() - 没有参数,获取标签内部的元素
                    //html(参数) - 将参数设置到标签内部
                    next_td.html(total.toFixed(1));
                }
            })
        }
    </script>
</body>
</html>
